<template>
	<div class="version-bar-box">
		<span class="spacing" v-for="item in versions" :key="item.id">
			<el-tooltip class="item" effect="dark" :content="item.tip" placement="top">
				<el-button
					size="small"
					:type="item.id === $route.name ? 'primary' : ''"
					:key="item.id"
					@click="jump(item.id)"
					>{{ item.name }}</el-button
				>
			</el-tooltip>
		</span>
	</div>
</template>

<script>
export default {
	name: 'VersionBar',
	data() {
		return {
			versions: [
				{
					id: 'upload1',
					name: 'v1.0',
					tip: 'v1.0：进度条'
				},
				{
					id: 'upload2',
					name: 'v2.0',
					tip: 'v2.0：拖拽'
				},
				{
					id: 'upload3',
					name: 'v3.0',
					tip: 'v3.0：图片格式校验'
				},
				{
					id: 'upload4',
					name: 'v4.0',
					tip: 'v4.0：大文件切片（维护中）'
				}
				// {
				// 	id: 'upload5',
				// 	name: 'v5.0',
				// 	tip: 'v5.0：秒传&断点续传'
				// },
				// {
				// 	id: 'upload6',
				// 	name: 'v6.0',
				// 	tip: 'v6.0：并发控制'
				// },
				// {
				// 	id: 'upload7',
				// 	name: 'v7.0',
				// 	tip: 'v7.0：失败重试&错误控制'
				// },
			],
		}
	},
	methods: {
		jump(id) {
			if (id === this.$route.name) {
				return
			}
			this.$router.push({ name: id })
		},
	},
}
</script>

<style lang="scss" scoped>
.version-bar-box {
	margin-bottom: 20px;
}
.spacing {
	margin-right: 10px;
}
</style>